项目中pc录音功能

项目中pc录音功能

---

第一种 在一个事件里进行录音 实现录音功能

我直接上代码

// 自己配音：
    manualDubbingold: function(type) {
      let that = this;
      navigator.mediaDevices
        .getUserMedia({
          audio: true
        })
        .then(stream => {
          console.log("创建了一个录音");
          const recordedChunks = [];
          var mediaRecorder = new MediaRecorder(stream); // 创建录音器实例alert
          // let time = (that.subtitle[index].end_time - that.subtitle[index].begin_time) * 1000 // 该段录音的总时长
          that.self_voice.time = (time / 1000).toFixed(1) - 0;

          if (type === "start") {
            let s_timer = null;
            let timer_djs = setInterval(() => {
              // 3 2 1 0的倒计时
              that.self_voice.num--;
              if (that.self_voice.num === 0) {
                clearInterval(timer_djs);
                setTimeout(() => {
                  mediaRecorder.start(); // 开始录音
                }, 200);
                that.self_voice.num = 3;
                that.self_voice.is_show_num = false;
                that.self_voice.is_recording = true;
                // 时长的倒计时:
                s_timer = setInterval(() => {
                  that.self_voice.time =
                    (that.self_voice.time * 10 - 0.1 * 10) / 10;
                  // if (that.self_voice.time == 0) {
                  //     clearInterval(s_timer)
                  // }
                }, 100);
                // 时间到了，自动停止录音：
                // let record_timer = setTimeout(() => {
                //     mediaRecorder.stop() // 停止
                //     clearTimeout(record_timer)
                // }, time)
              }
            }, 1000);
            // 监听开始录音：
          }

          if (type === "stop") {
            clearInterval(s_timer); //停止定时器
            mediaRecorder.stop(); // 停止
          }
          mediaRecorder.addEventListener("start", e => {
            // console.log('开始录音中')
          });
          mediaRecorder.addEventListener("dataavailable", e => {
            if (e.data.size > 0) recordedChunks.push(e.data);
            // console.log('正在录音')
          });
          // 监听结束录音：
          mediaRecorder.addEventListener("stop", e => {
            let dataWithType = new Blob(recordedChunks, {
              type: "audio/x-wav"
            });
            that.self_voice.file = dataWithType; // 取到该音频

            that.self_voice.is_recording = false;
            that.self_voice.submit_active = true;
            that.self_voice.src = URL.createObjectURL(new Blob(recordedChunks)); // 预览
            //新增结束录音后提交录音
            if (!that.self_voice.submit_active) return;
            clearOrAddVoice(that, that.dubbingindex, that.self_voice.file);
          });
        })
        .catch(error => {
          that.$message({
            showClose: true,
            type: "error",
            message: "没有找到音频设备麦克风",
            duration: 3000
          });
        });
    },

---

这个可以实现 固定时间录音 时间完成后 自动结束录音

## 第二种 在一个文件中 由别的事件 来停止录音 即手动暂停 （我使用插件）
csdn里的大佬文章 很有用

manualDubbing: function(type) {
      //点击配音
      let that = this;
      if (type === "start") {
        that.stopbtn = false; //点击了暂停 让暂停重置 变双竖杠
        that.captureErcord(); //录音方法
      } else {
        if (!that.stopbtnchoose) return;
        this.mediaRecorder.stop();
        clearInterval(this.intervaltimerid);
        this.mediaRecorder.stream.stop();
      }
    },
    captureErcord: function() {
      //录音方法
      console.log("1点击录音", new Date());
      navigator.mediaDevices
        .getUserMedia(this.mediaConstraints)
        .then(this.onMediaSuccess)
        .catch(this.onMediaError);
    },
    // 错误处理方法
    onMediaError: function(e) {
      console.log("阿偶~您的浏览器貌似不支持录音哦...", e);
      clearInterval(this.intervaltimerid);
      this.$message.error("您的浏览器暂不支持录音功能");
    },
    onMediaSuccess: function(stream) {
      console.log("2成功时间录音", new Date());
      let that = this;
      let timer_djs = setInterval(() => {
        // 3 2 1 0的倒计时
        that.self_voice.num--;
        if (that.self_voice.num === 0) {
          clearInterval(timer_djs);
          that.self_voice.num = 3;
          that.self_voice.is_show_num = false;
          that.self_voice.is_recording = true;
          that.stopbtnchoose = true; //让暂停鼠标移上变化

          that.mediaRecorder = new MediaStreamRecorder(stream);
          // 获取音频流
          that.mediaRecorder.stream = stream;
          that.mediaRecorder.mimeType = "audio/wav";
          that.self_voice.shiting_active = false;
          that.mediaRecorder.ondataavailable = function(blob) {
            console.log("3录音", new Date());
            clearInterval(that.intervaltimerid);
            const url = URL.createObjectURL(blob);
            // _that.$emit('handleStop', {
            //     url: url,
            //     mblob: blob
            // })
            that.self_voice.src = url; //预览
            // _that.self_voice.index = _that.dubbingindex // 记录下标
            // _that.dubbingData[_that.dubbingindex] = url //预览列表
          };
          that.mediaRecorder.start(60 * 1000); //录音时长  必须要
          // 定义间隔

          that.intervaltimerid = setInterval(() => {
            // 开始累积
            // 时长的倒计时:
            that.self_voice.time = (that.self_voice.time * 10 - 0.1 * 10) / 10;
            if (that.self_voice.time <= 0) {
              //heng
              that.timecolor = true;
            }
          }, 100);
        }
      }, 1000);
    },

方法仅供参考 毕竟个人项目需求不同